$(function () {
  // 参数设置全局变量
  let q = {
    pagenum: 1, // 是	int	页码值
    pagesize: 2, // 是	int	每页显示多少条数据
    cate_id: '', // 否	string	文章分类的 Id
    state: '' // 否	string	文章的状态，可选值有：已发布、草稿
  }
  // 初始化文章列表
  initArticleList()
  let layer = layui.layer

  function initArticleList() {
    axios({
      url: '/my/article/list',
      method: 'get',
      params: q
    }).then(res => {
      //成功回调
      //console.log(res.data.data)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      // 渲染
      let arr = []
      res.data.data.forEach(ele => {
        arr.push(`
          <tr>
            <td>${ele.title}</td>
            <td>${ele.cate_name}</td>
            <td>${dateFormat(ele.pub_date)}</td>
            <td>${ele.state}</td>
            <td>
                <a href="/aritcle/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">修改</a>
                <button data-id=${
                  ele.Id
                } class="del-btn layui-btn layui-btn-xs layui-btn-danger">
                    删除
                </button>
            </td>
          </tr>
        `)
      })
      // 循环结束后,赋值
      $('tbody')
        .empty()
        .html(arr.join(''))

      // 渲染分页
      renderPage(res.data.total)
    })
  }

  // 渲染筛选中的文章类别列表
  let form = layui.form
  initArtCateList()

  function initArtCateList() {
    axios({
      url: '/my/article/cates'
    }).then(res => {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      //成功 渲染
      let arr = [`<option value="">请选择文章所属</option>`]
      res.data.data.forEach(ele => {
        if (ele.Id > 0)
          arr.push(`
                  <option value="${ele.Id}">${ele.name}</option>
                  `)
      })
      // 循环结束赋值
      let str = arr.join('')
      $('[name=cate_id]')
        .empty()
        .html(str)
      // form.render() 可以渲染layui中的 select/checkbox/radio
      form.render()
    })
  }

  // 筛选
  $('#searchForm').on('submit', function (e) {
    e.preventDefault()
    q.cate_id = $('[name=cate_id]').val()
    q.state = $('[name=state]').val()
    // 重新渲染 文章列表
    initArticleList()
  })

  // 分页
  function renderPage(total) {
    let laypage = layui.laypage
    //执行一个laypage实例
    laypage.render({
      elem: 'pageBox', //注意，这里的 pageBox 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize, // 每页显示多少条
      curr: q.pagenum, // 第几页
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr) //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit) //得到每页显示的条数

        //首次不执行
        if (!first) {
          //把当前页改变,重新渲染文章列表
          q.pagenum = obj.curr
          q.pagesize = obj.limit
          initArticleList()
        }
      }
    })
  }

  // 删除
  $('tbody').on('click', '.del-btn', function () {
    let id = $(this).attr('data-id')
    layer.confirm(
      '确认删除吗?', {
        icon: 3,
        title: '提示'
      },
      function (index) {
        // 发送ajax
        axios({
          url: '/my/article/delete/' + id,
          method: 'get'
        }).then(res => {
          //成功回调
          if (res.data.status !== 0) {
            return layer.msg(res.data.message)
          }
          // 成功:提示
          layer.msg('删除文章成功')
          // (删除ajax成功后) 当我们再次发起请求的时候,如果页面中还有一条数据,当前页--,当前页大于等于2才有资格--
          if ($('.del-btn').length == 1 && q.pagenum >= 2) q.pagenum--
          //$('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--
          initArticleList()
        })
        layer.close(index)
      }
    )
  })
})